<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编译作用域</title>
</head>
<!--
■在真正学习插槽之前,我们需要先理解一个概念：编译作用域。
■官方对于编译的作用域解析比较简单,我们自己来通过一个例子来理解这个概念:
■我们来考虑下面的代码是否最终是可以渲染出来的:
  口<my-div v-show="isShow"></my-div>中 ,我们使用了isShow属性。
  口isShow属性包含在组件中,也包含在Vue实例中。

■组件作用域的范围：
  口标签中使用变量或者数据时，只会去查找使用对应组件作用域中数据和变量，不会跨用域
  口比如：app组件中含有myDiv组件，在app组件中使用的变量或者数据对象只能在app组件实例对象中去找，不会去myDiv组件对象找，
    myDiv组件中使用的变量或者数据只会在myDiv组件对象中去找，不会去app组件或者其他组件中去找
-->
<body>

<div id="app">
  <!--  这个地方的isShow用到的变量是vue实例中的isShow，因为在用变量或数据是，只会去查找使用当前组件当前作用域中数据和变量，不会跨
    作用域，很明显，我们这里使用的是vue实例对应的作用域-->
  <my-div v-show="isShow"></my-div>
  <br>
  <button @click="isShow = !isShow">切换show</button>
</div>

<!--模板信息-->
<template id="myDiv">
  <div>
    <p>我是子组件头</p>
    <p>我是子组件内容</p>

    <!--  这个地方的isShow用到的变量是myDiv组件中的isShow属性，因为在用变量或数据时，只会去查找使用当前组件的作用域中数据和变量，不会跨
          作用域，很明显，我们这里使用的是myDiv组件对应的作用域-->
    <p v-show="isShow">子组件切换显示内容</p>
    <button @click="isShow = !isShow">子组件切换show</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  //构造组件对象
  const myDiv = {
    template: "#myDiv",
    data() {
      return {
        isShow: false
      }
    }
  }

  //vue实例（root组件）--父组件
  const app = new Vue({
    el: "#app",
    data: {
      isShow: true
    },
    //注册局部组件
    components: {
      myDiv
    }
  });
</script>
</body>
</html>